<template>
    <div class="demo">
        <h2>📌 简单用法</h2>
        <p>
            <strong>预览</strong>
        </p>
        <div class="component-wrapper">
            <div class="component-wrapper-demo">
                <syxPopup :dialogVisible="dialogVisible">123</syxPopup>
                <el-button @click="dialogVisible=!dialogVisible">打开</el-button>
            </div>
            <div class="code-content" v-highlight style="height: 0;">
                <div class="code-content-height">
                    <pre><code class="html">{{codeStr}}</code></pre>
                </div>
            </div>
            <div class="lock-code" @click="showCode(0)" ref="xxx">
                <span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import mixin from '../mixin'

    export default {
        mixins: [mixin],
        components: {
        },
        data() {
            return {
                dialogVisible:false,
                codeStr: `<syxPopup :dialogVisible="dialogVisible">123</syxPopup>
                <el-button @click="dialogVisible=!dialogVisible">打开</el-button>



                dialogVisible:false,



                源代码展示:
                  <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            :width="width"
            :before-close="handleClose"
            :close-on-click-modal="dialogVisiblemodal"
            :close-on-press-escape="dialogVisibleescape"
            append-to-body
    >
        <slot></slot>
        <span slot="footer" class="dialog-footer" v-if="examineVisible">
            <el-button @click="handleClose">{{titlehandleClose}}</el-button>
            <el-button @click="affirm" type="primary">{{titleaffirm}}</el-button>
        </span>
    </el-dialog>

      <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            :width="width"
            :before-close="handleClose"
            :close-on-click-modal="dialogVisiblemodal"
            :close-on-press-escape="dialogVisibleescape"
            append-to-body
    >
        <slot></slot>
        <span slot="footer" class="dialog-footer" v-if="examineVisible">
            <el-button @click="handleClose">{{titlehandleClose}}</el-button>
            <el-button @click="affirm" type="primary">{{titleaffirm}}</el-button>
        </span>
    </el-dialog>

      methods: {
            handleClose() {
                this.$emit("handleClose");
            },
            affirm() {
                this.$emit("affirm");
            }
        }

        `
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
